<template>
  <a-drawer
    title="结转明细"
    :maskClosable="true"
    :visible="visible"
    :width="1000"
    @close="closeModal"
    :destroyOnClose="true"
  >
    <a-row type="flex" style="background: #eee; padding: 10px 20px;">
      <a-col :span="4" v-if="detail.intoNum">
        <a-statistic title="转入次数" :value="detail.intoNum"/>
      </a-col>
      <a-col :span="4" v-if="detail.intoAmount">
        <a-statistic title="转入金额" :value="`￥${detail.intoAmount}`"/>
      </a-col>
      <a-col :span="4" v-if="detail.outNum">
        <a-statistic title="转出次数" :value="detail.outNum"/>
      </a-col>
      <a-col :span="4" v-if="detail.outAmount">
        <a-statistic title="转出金额" :value="`￥${detail.outAmount}`"/>
      </a-col>
    </a-row>
    <a-row v-for="(item, index) of detail.list" :key="index" class="mt-10" :gutter="[12, 12]">
      <a-col :span="24" style="padding: 4px 10px;font-weight: bold">
        结转时间：{{item.date}}
      </a-col>
      <a-col :span="24" v-for="(list, listIndex) of item.list" :key="listIndex">
        <a-row :gutter="[12, 12]">
          <a-col :span="24" v-if="list.transfer_out">
            <CarryOverDetailTable
              dataType="out"
              :dataSource="list.transfer_out"
            />
          </a-col>
          <a-col :span="24" v-if="list.transfer_into">
            <CarryOverDetailTable
              dataType="into"
              :dataSource="list.transfer_into"
            />
          </a-col>
        </a-row>
      </a-col>
    </a-row>


  </a-drawer>
</template>

<script>
import { defineComponent, watch, reactive, toRefs, computed, ref } from "vue";
import store from "../../../../store";
import moment from "moment";
import { message } from "ant-design-vue";
import CarryOverDetailTable from "@/views/bill/BillDetail/modules/CarryOverDetailTable.vue";
import request from "@/common/utils/request";

export default defineComponent({
  name: "CarryOverMoreDetail",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,  // 账单id
    },
  },
  components: {
    CarryOverDetailTable,
  },
  setup(props, {emit}) {


    const closeModal = () => {
      emit("handleCancel");
    };


    const state = reactive({
      detail: {},
    });

    const getDetail = () => {
      request.get('/org', "/billTransfer/transferDetailsByDate", {bill_id: props.id}).then((res) => {
        state.detail = res;
      }).finally(() => {
      })
    };

    const init = () => {
      getDetail();
    };

    const reset = () => {
      state.detail = {};
    };

    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      ...toRefs(state),
      closeModal,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-statistic-title) {
  color: @primary-color;
}
:deep(.ant-statistic-content-value) {
  color: @primary-color;
  font-weight: bold;
}
</style>